<!DOCTYPE html>
<html><head>

<title>HTML5 Tooltips example</title>

<link rel="stylesheet" type="text/css" href="./html5tooltips.css" />
<link rel="stylesheet" type="text/css" href="./html5tooltips.animation.css" />
<script type="text/javascript" src="./html5tooltips.js"></script>

<style type="text/css">

body {
  width: 35em;
  margin: 0 auto;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  height:9999px;
}

</style>

</head><body>

<form action="#" method="post">

  <h3>Register new customer</h3>

  <fieldset>
    <legend>Login and password</legend>

    <table>
      <tbody>
        <tr>
          <td>
            <label for="name">Login name</label>
          </td>
          <td>
            <input id="name" type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="password">Password</label>
          </td>
          <td>
            <input id="password" type="password" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="password2">Repeat password</label>
          </td>
          <td>
            <input id="password2" type="password" />
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>

  <br>

  <fieldset>
    <legend>Contact information</legend>
    <table data-tooltip-animate-function="spin" data-tooltip-stickto="right" data-tooltip-persistent="true">
      <tbody>
        <tr>
          <td>
            <label for="fullname">Full name</label>
          </td>
          <td>
            <input id="fullname" type="text" data-tooltip="Your first and second name" data-tooltip-color="indigo" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="email">Email</label>
          </td>
          <td>
            <input id="email" type="text" data-tooltip="It would be used to restore your password" data-tooltip-color="kelly" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="phone">Phone</label>
          </td>
          <td>
            <input id="phone" type="text" data-tooltip="We may call you to verify your identity" data-tooltip-color="hot pink" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="address">Address</label>
          </td>
          <td>
            <textarea id="address" data-tooltip="For post delivery" data-tooltip-more="It should contain zip code and country name" data-tooltip-color="bamboo" data-tooltip-delay="1000" data-tooltip-maxwidth="180"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>
</form>

<script type="text/javascript">

for(var i=10;i--;)
  html5tooltips([
    {
      contentText: "Short and easy to remember",
      contentMore: "Should <span style='text-decoration:underline;'>not</span> contain white spaces or special characters",
      targetSelector: "#name",
      stickTo: "top",
      color: "violet",
      maxWidth: 180
    },
    {
      contentText: "<a href='http://example.com' target='_blank'>Generate</a>",
      contentMore: "May contain d<span style='color:red;'>1</span>g<span style='color:red;'>1</span>ts and sp<span style='color:red;'>3</span>c<span style='color:red;'>!</span>al sym<span style='color:red;'>6</span>ols",
      targetSelector: "#password",
      stickTo: "right",
      color:'metalic silver',
      maxWidth: 180,
      persistent: true
    },
    {
      contentText: "To ensure you remember it",
      color: "rouge",
      targetSelector: "#password2"
    }
  ]);

for(var i=10;i--;)
  html5tooltips({
    contentText: "Click to focus the field",
    color: "peacock",
    targetSelector: "label",
  });

for(var i=10;i--;)
  html5tooltips.refresh();

console.log(
  html5tooltips.getTooltipByTarget(
    document.getElementById('address')));

</script>

</body></html>
